<template>
	<view class="page">
		<!-- 分类切换 -->
		<view class="category-tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'activities' }" 
				@click="switchTab('activities')"
			>
				<text class="tab-text">活动收藏</text>
				<text class="tab-count">(8)</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'moments' }" 
				@click="switchTab('moments')"
			>
				<text class="tab-text">动态收藏</text>
				<text class="tab-count">(4)</text>
			</view>
		</view>

		<!-- 活动收藏列表 -->
		<view v-if="activeTab === 'activities'" class="content">
			<view 
				class="item-card" 
				v-for="item in favoriteActivities" 
				:key="item.id"
				@click="viewDetail(item)"
			>
				<image :src="item.image" class="item-image" />
				<view class="item-info">
					<text class="item-title">{{ item.title }}</text>
					<text class="item-desc">{{ item.description }}</text>
					<view class="item-meta">
						<text class="meta-item">{{ item.date }}</text>
						<text class="meta-item">{{ item.location }}</text>
					</view>
				</view>
				<view class="item-actions">
					<image 
						src="/static/svg/heart.svg" 
						class="action-icon active"
						@click.stop="toggleFavorite(item)"
					/>
				</view>
			</view>
		</view>

		<!-- 动态收藏列表 -->
		<view v-if="activeTab === 'moments'" class="content">
			<view 
				class="moment-card" 
				v-for="item in favoriteMoments" 
				:key="item.id"
				@click="viewDetail(item)"
			>
				<view class="moment-header">
					<image :src="item.avatar" class="user-avatar" />
					<view class="user-info">
						<text class="username">{{ item.username }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
					<image 
						src="/static/svg/heart.svg" 
						class="heart-icon active"
						@click.stop="toggleFavorite(item)"
					/>
				</view>
				<text class="moment-content">{{ item.content }}</text>
				<view class="moment-images" v-if="item.images.length">
					<image 
						v-for="(img, index) in item.images" 
						:key="index"
						:src="img" 
						class="moment-image"
					/>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="isEmpty" class="empty-state">
			<image src="/static/svg/bookmark.svg" class="empty-icon" />
			<text class="empty-text">暂无收藏内容</text>
			<text class="empty-hint">去发现更多精彩内容吧～</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

const activeTab = ref('activities');

// 模拟数据
const favoriteActivities = ref([
	{
		id: 1,
		title: '周末徒步登山活动',
		description: '一起去感受大自然的美好，放松身心',
		image: '/static/images/activity1.jpg',
		date: '2024-01-20',
		location: '香山公园'
	},
	{
		id: 2,
		title: '咖啡品鉴会',
		description: '学习咖啡文化，品味不同产区的咖啡豆',
		image: '/static/images/activity2.jpg',
		date: '2024-01-22',
		location: '三里屯'
	}
]);

const favoriteMoments = ref([
	{
		id: 1,
		username: '小王同学',
		avatar: '/static/svg/avatar-female.svg',
		time: '2小时前',
		content: '今天的夕阳真的太美了！分享给大家～',
		images: ['/static/images/activity3.jpg']
	}
]);

const isEmpty = computed(() => {
	if (activeTab.value === 'activities') {
		return favoriteActivities.value.length === 0;
	}
	return favoriteMoments.value.length === 0;
});

// 切换标签
const switchTab = (tab) => {
	activeTab.value = tab;
};

// 查看详情
const viewDetail = (item) => {
	uni.showToast({
		title: '查看详情功能开发中',
		icon: 'none'
	});
};

// 取消收藏
const toggleFavorite = (item) => {
	uni.showModal({
		title: '提示',
		content: '确定要取消收藏吗？',
		success: (res) => {
			if (res.confirm) {
				if (activeTab.value === 'activities') {
					const index = favoriteActivities.value.findIndex(i => i.id === item.id);
					if (index > -1) {
						favoriteActivities.value.splice(index, 1);
					}
				} else {
					const index = favoriteMoments.value.findIndex(i => i.id === item.id);
					if (index > -1) {
						favoriteMoments.value.splice(index, 1);
					}
				}
				uni.showToast({
					title: '已取消收藏',
					icon: 'success'
				});
			}
		}
	});
};
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 分类标签 */
.category-tabs {
	background: white;
	display: flex;
	padding: 0 20px;
	border-bottom: 1px solid #f0f0f0;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 15px 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tab-item.active {
	color: #667eea;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 3px;
	background: #667eea;
	border-radius: 2px;
}

.tab-text {
	font-size: 16px;
	font-weight: 500;
}

.tab-count {
	font-size: 14px;
	color: #999;
	margin-left: 5px;
}

/* 内容区域 */
.content {
	padding: 15px;
}

/* 活动卡片 */
.item-card {
	background: white;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	display: flex;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.item-image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	margin-right: 15px;
}

.item-info {
	flex: 1;
}

.item-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

.item-desc {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 10px;
	line-height: 1.4;
}

.item-meta {
	display: flex;
	gap: 15px;
}

.meta-item {
	font-size: 12px;
	color: #999;
}

.item-actions {
	display: flex;
	align-items: center;
}

.action-icon {
	width: 24px;
	height: 24px;
}

.action-icon.active {
	filter: hue-rotate(320deg) saturate(2);
}

/* 动态卡片 */
.moment-card {
	background: white;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.moment-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	margin-right: 12px;
}

.user-info {
	flex: 1;
}

.username {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	display: block;
}

.time {
	font-size: 12px;
	color: #999;
	display: block;
	margin-top: 2px;
}

.heart-icon {
	width: 20px;
	height: 20px;
}

.heart-icon.active {
	filter: hue-rotate(320deg) saturate(2);
}

.moment-content {
	font-size: 15px;
	color: #333;
	line-height: 1.5;
	display: block;
	margin-bottom: 12px;
}

.moment-images {
	display: flex;
	gap: 8px;
}

.moment-image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80px 20px;
}

.empty-icon {
	width: 64px;
	height: 64px;
	opacity: 0.3;
	margin-bottom: 20px;
}

.empty-text {
	font-size: 16px;
	color: #666;
	display: block;
	margin-bottom: 8px;
}

.empty-hint {
	font-size: 14px;
	color: #999;
	display: block;
}
</style> 